<template>
  <div class="md-resource-business-component">

    <el-upload class="md-upload-demo" name="file" :action="action" :headers="headers" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess">
      <md-button class="md-btn-upload" size="small" v-if="params.type===1 && params.type1==6">轮播图上传</md-button>
      <md-button class="md-btn-upload" size="small" v-if="params.type===1 && params.type1==7">插图上传</md-button>
      <md-button class="md-btn-upload" size="small" v-if="params.type===1 && params.type1==2">背景图上传</md-button>
    </el-upload>

    <!-- <el-tabs v-model="search.type2" @tab-click="getResourceList()">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane v-for="item in tabs" :key="item.dictCode" :label="item.dictLabel" :name="item.dictValue" />
    </el-tabs> -->

    <div class="list" :class="{'list-bg':params.type1===2,'list-border':params.type1===3,'list-flotage':params.type1===4,'list-music':params.type1===5,'list-banner':params.type1===6,'list-zhuanti':params.type1===7}" v-if="!empty" :style="{height:dialogHeight}">
      <div class="item" v-for="item in list" :key="item.id" @click="handleClick(item)">
        <img :src="item.content" v-if="params.type1!==5" />
        <div class="pic" v-if="params.type1===5">
          <i class="el-icon" :class="[item.play?'el-icon-video-pause':'el-icon-video-play']" @click.stop="handlePause(item)"></i>
          <span class="name"><img src="../../../assets/img/icon-music.png" />{{item.name}}</span>
          <audio :src="item.content" :ref="`music${item.id}`" controls v-show="false"></audio>
        </div>
        <p v-if="params.type1===5">使用</p>
        <span class="selected" v-if="current===item.id && params.type1!==6">使用中</span>
      </div>
    </div>

    <el-empty v-if="empty"></el-empty>
  </div>
</template>

<script>
import { mdApiBase } from '../../../ddd/config.service'
export default {
  name: 'MdResourceBusinessComponent',
  props: {
    params: {
      type: Object,
      default: () => {}
    },
    dialogHeight: {
      type: String,
      default: '480px'
    }
  },
  data() {
    return {
      action: `${mdApiBase}/common/upload`,
      headers: {
        Authorization: this.$local.getItem('Authorization')
      },
      current: null,
      tabs: [],
      list: [],
      total: 0,
      search: {
        ...this.params,
        type2: null,
        pageNum: 1,
        pageSize: 10000,
        orderByColumn: 'id',
        isAsc: 'desc'
      },
      loading: null,
      empty: false,
      bannerList: []
    }
  },
  watch: {
    'params.rand': {
      handler(val) {
        console.log(val)
      },
      deep: true
    }
  },
  created() {
    this.getResourceList()
  },
  methods: {
    handleBeforeUpload() {
      return true
    },
    async handleUploadSuccess(res) {
      try {
        if (res.code === 200) {
          this.$emit('selected', {
            content: res.url,
            createdBy: null,
            createdTime: null,
            deleted: 0,
            id: this.list.length + 156297852,
            name: res.originalFilename,
            remark: null,
            type: this.params.type,
            type1: this.params.type1,
            type2: this.params.type2,
            updatedBy: null,
            updatedTime: null,
            operation: 'custom'
          })
          return
        }

        if (res.code === 401) {
          this.$local.clear()
          this.$message.error('登录超时')
          this.$router.push('/login')
          return
        }

        this.$message.error(res.msg)
      } catch (error) {
        console.log(error)
      }
    },
    async getResourceList() {
      try {
        this.loading = this.$loading({
          text: '加载中'
        })

        const params = Object.assign({}, this.search)

        if (params.type2 === '0') {
          params.type2 = null
        }

        const res = await this.$http.get(`/system/resource/list`, {
          params: params
        })

        if (res.code === 200) {
          res.rows.forEach((item) => {
            item.play = false
          })
          this.list = res.rows
          this.total = res.total
          this.empty = res.total === 0
        }

        this.loading.close()
      } catch (error) {
        console.log(error)
        this.loading.close()
      }
    },
    handleClick(item) {
      this.current = item.id
      this.$emit('selected', { ...item })
    },
    handlePause(item) {
      this.list.forEach((args) => {
        if (args.id !== item.id) {
          args.play = false
          this.$refs[`music${args.id}`][0].pause()
        }
      })
      if (!item.play) {
        this.$refs[`music${item.id}`][0].play()
        item.play = true
      } else {
        this.$refs[`music${item.id}`][0].pause()
        item.play = false
      }
    },
    handleCloseAllMusic() {
      this.list.forEach((args) => {
        args.play = false
        this.$refs[`music${args.id}`][0].pause()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.md-resource-business-component {
  position: relative;
  .md-upload-demo {
    position: absolute;
    right: 0px;
    top: -43px;
    z-index: 10;
  }
  ::v-deep .el-tabs {
    width: 100%;
    .el-tabs__header {
      margin: 0px;
      .el-tabs__nav-wrap {
        &::after {
          display: none !important;
        }
        .el-tabs__active-bar {
          background-color: @md-primary-acolor;
        }
        .el-tabs__item {
          font-size: 13px;
          font-weight: normal;
          color: #666;
          &.is-active {
            color: @md-primary-acolor;
          }
        }
      }
    }
    .el-tabs__content {
      display: none;
    }
  }
  .list {
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    .scroll-bar(5px,5px);
    .item {
      position: relative;
      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
      }
      .selected {
        position: absolute;
        left: -26px;
        top: -7px;
        background-color: #e91611;
        color: #fff;
        z-index: 2;
        font-size: 12px;
        text-align: center;
        padding: 15px 20px 5px 20px;
        transform: rotate(-45deg);
      }
    }
  }
  .list-bg {
    .item {
      display: inline-block;
      width: 160px;
      height: 160px;
      overflow: hidden;
      margin-bottom: 20px;
      border-radius: 4px;
      margin-right: 20px;
      background-color: #f0f0f0;
      text-align: center;
      cursor: pointer;
      transition: transform 0.25s ease-out, background 0.45s;
      &:nth-child(5n) {
        margin-right: 0px !important;
      }
      &:hover {
        transform: translateY(-6px);
      }
    }
  }
  .list-border {
    .item {
      display: inline-block;
      width: 160px;
      height: 160px;
      overflow: hidden;
      margin-bottom: 20px;
      border-radius: 4px;
      margin-right: 20px;
      background-color: #f0f0f0;
      text-align: center;
      cursor: pointer;
      transition: transform 0.25s ease-out, background 0.45s;
      &:nth-child(5n) {
        margin-right: 0px !important;
      }
      &:hover {
        transform: translateY(-6px);
      }
    }
  }
  .list-flotage {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .item {
      width: 120px;
      height: 90px;
      overflow: hidden;
      margin-bottom: 20px;
      border-radius: 4px;
      margin-right: 20px;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.25s ease-out, background 0.45s;
      &:nth-child(6n) {
        margin-right: 0px !important;
      }
      &:hover {
        transform: translateY(-6px);
      }
    }
  }
  .list-music {
    .item {
      display: inline-block;
      width: 200px;
      height: 158px;
      overflow: hidden;
      margin-bottom: 20px;
      border-radius: 4px;
      margin-right: 20px;
      background-color: #f0f0f0;
      text-align: center;
      cursor: pointer;
      &:nth-child(4n) {
        margin-right: 0px !important;
      }
      .pic {
        width: 100%;
        height: 131px;
        box-sizing: border-box;
        text-align: center;
        background-color: #fff;
        padding-top: 30px;
        .el-icon {
          font-size: 40px;
          color: @md-primary-color;
        }
        .name {
          display: block;
          font-size: 12px;
          color: #999;
          overflow: hidden;
          margin-top: 10px;
          img {
            margin-right: 5px;
          }
        }
      }
      p {
        height: 27px;
        line-height: 27px;
        text-align: center;
        color: #fff;
        background-color: @md-primary-color;
        font-size: 13px;
      }
    }
  }
  .list-banner {
    .item {
      display: inline-block;
      width: 212px;
      height: 120px;
      overflow: hidden;
      margin-bottom: 20px;
      border-radius: 4px;
      margin-right: 20px;
      background-color: #f0f0f0;
      text-align: center;
      cursor: pointer;
      &:nth-child(4n) {
        margin-right: 0px !important;
      }
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .list-zhuanti {
    .item {
      display: inline-block;
      width: 205px;
      height: 120px;
      overflow: hidden;
      margin-bottom: 20px;
      border-radius: 4px;
      margin-right: 20px;
      background-color: #f0f0f0;
      text-align: center;
      cursor: pointer;
      &:nth-child(4n) {
        margin-right: 0px !important;
      }
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>
